import { Button, Modal } from 'antd';
import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {add} from '../../apis/Stores';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Upload,
} from 'antd';
import form from 'antd/lib/form';

const Add: React.FC = () => {

  const { RangePicker } = DatePicker;
  const { TextArea } = Input;

   const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
    setComponentDisabled(disabled);
  };

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const [form] = Form.useForm();
  const handleOk = async() => {
    setIsModalOpen(false);
    console.log(form.getFieldsValue())
    const list = form.getFieldsValue()
    console.log(list)
    const res = await add({form:list})
    console.log(res)
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    console.log('取消')
  };

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal title="添加" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          onValuesChange={onFormLayoutChange}
        >
          <Form.Item name='name' label="店名">
            <Input />
          </Form.Item>
          <Form.Item name='mobile' label="手机号">
            <Input />
          </Form.Item>
          <Form.Item name="startTime" label="营业时间">
            <RangePicker />
          </Form.Item>
          <Form.Item label="服务范围">
            <Select>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name='username' label="店主">
            <Input />
          </Form.Item>
          <Form.Item name='intro' label="门店介绍">
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item label="门店地址">
            <Input />
          </Form.Item>
          <Form.Item label="Upload" valuePropName="fileList">
            <Upload action="/upload.do" listType="picture-card">
              <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }}>门店logo</div>
              </div>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Add;

function setComponentDisabled(disabled: boolean) {
  // throw new Error('Function not implemented.');
}
